<template>
  <li>
    <div class="iconBox" @mouseenter='enter' @mouseleave='leave' @click='finish'>
      <svg class="icon circle" aria-hidden="true" v-show="!ischecked">
        <use xlink:href="#icon-uncheck"></use>
      </svg>
      <svg class="icon circle" aria-hidden="true" v-show="ischecked">
          <use xlink:href="#icon-checking"></use>
      </svg>
      <svg class="icon circle" aria-hidden="true" v-if='checked' >
          <use xlink:href="#icon-checked"></use>
      </svg>
    </div>
    <span>{{title}}</span>
  </li>
</template>

<script>
import { mapActions } from "vuex";
export default {
  name: "todo",
  props: ["title", "index", "isDone"],
  data() {
    return {
      ischecked: false,
      checked: this.isDone,
      eq: this.index
    }
  },
  methods: {
    ...mapActions(['alterTodo']),
    enter(){
      this.ischecked = true
    },
    leave(){
      this.ischecked = false
    },
    finish() {
      this.alterTodo({
        index: this.eq,
        isDone: !this.checked
      }).then(() => {
        this.checked = !this.checked
      }).catch(() => {
        console.log('失败')
      })
    }
  }
};
</script>

<style scoped lang="less" src="./todo.less"></style>

